<template>
  <div>
    <div v-if="message != null">{{message}}</div>
    <div>
      <label>
        登录名
        <input v-model="loginName" type="text" />
      </label>
    </div>
    <div>
      <label>
        密码
        <input v-model="password" type="password" />
      </label>
    </div>
    <div>
      <button v-on:click="login">登录</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return { message: null, loginName: null, password: null };
  },
  methods: {
    //点击发生的事件
    login() {
      //发送请求到授权中心去登录
      let url = "/do-login";

      //使用json发送数据
    //   let data = {
    //     loginName: this.loginName,
    //     password: this.password
    //   };

    // 使用普通表单发送数据，FormData是HTML+JS的内置对象
      let data = new FormData();
      data.append("loginName", this.loginName);
      data.append("password", this.password);

      axios
        //需要发送url和data参数
        .post(url, data)
        //成功需要跳转到首页
        .then(Response => {
            //登录成功以后，需要跳转到首页
            let result = Response.data;
            if(result.code === 1){
                //成功
                 // this.$router 表示前端路由器，用于跳转到其他路由
                // push相当于修改地址栏的URL链接
                // 有时候还会使用this.$route 表示当前路由，用于获取路由参数
                 // 转发页面到首页
                // this.$router.push("/");
                // 根据路由参数完成授权的链接
                let redirectUrl = this.$route.params.redirectUrl;
                if (redirectUrl) {
                // 再：发送请求到路由传递过来的重定向地址，完成网关的授权
                axios.get(redirectUrl).then(resp => {
                    // 转发页面到首页
                    this.$router.push("/");
                }).catch(error=>{
                    this.$router.push("/");
                });
                } else {
                this.$router.push("/");
                }
            }else{
                //失败
                console.error("登录失败");
                this.message = "登录失败";
            }
        })
        //失败，报错
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>


